<template>
  <div class="common-layout">
    <el-container tyle="height:100vh">
      <el-aside class="aside">
        <div class="infoBox">
          <div @click="top" class="home">
            <el-icon>
              <HomeFilled />
            </el-icon>
          </div>
          <div class="info">
            <el-avatar shape="circle" :size="100"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
            <div>
              <span>欢迎 {{ user }}</span>
            </div>
            <div>{{ nowTime }}</div>
          </div>
          <el-menu active-text-color="#fff" background-color="#545c64" class="el-menu" default-active="1"
            text-color="#ccc" style="height: 85vh" router>
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                系统首页
              </template>

              <el-menu-item index="/mainView/BusinessOverview">经营概况</el-menu-item>
              <el-menu-item index="/mainView/AccountInformation">账号资料</el-menu-item>

              <el-menu-item index="/mainView/RecordAppointment">预约记录</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                用户管理
              </template>

              <el-menu-item index="/mainView/ListMembers">会员列表</el-menu-item>
              <el-menu-item index="/mainView/LevelMembership">会员等级</el-menu-item>

              <el-menu-item index="/mainView/MembershipCard">会员卡</el-menu-item>
              <el-menu-item index="/mainView/ListCoaches">教练列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                商城管理
              </template>

              <el-menu-item index="/mainView/ListGoods">商品列表</el-menu-item>
              <el-menu-item index="/mainView/ClassificationGoods">商品分类</el-menu-item>

              <el-menu-item index="/mainView/ShoppingMallOrder">商城订单</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                课程管理
              </template>

              <el-menu-item index="/mainView/teamManagement">团队管理</el-menu-item>
              <el-menu-item index="/mainView/PrivateEducationManagement">私教管理</el-menu-item>

              <el-menu-item index="/mainView/ManagementEvaluation">评价管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                场馆管理
              </template>
              <el-menu-item index="/mainView/ListVenues">场馆列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                活动管理
              </template>
              <el-menu-item index="/mainView/CouponsView">优惠券</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="7">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                系统管理
              </template>
              <el-menu-item index="/mainView/MemberManagement">成员管理</el-menu-item>
              <el-menu-item index="/mainView/RoleManagement">角色管理</el-menu-item>
              <el-menu-item index="/mainView/AdvertisingManagement">广告管理</el-menu-item>
              <el-menu-item index="/mainView/AnnouncementManagement">公告管理</el-menu-item>
              <el-menu-item index="/mainView/SystemConfiguration">系统配置</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>

      </el-aside>
      <el-main style="height:100vh">
        <!-- <el-header>
          <heads></heads>
        </el-header> -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import router from "../router";
import { formatDate } from "../components/zch/utils/formatDate";
// import heads from '../components/zch/HeaderView.vue'

const top = function () {
  router.push('/mainView')
}
const nowTime = ref("");
onMounted(() => {
  setInterval(() => {
    nowTime.value = formatDate();
  });
  
});

//兑换用户信息
const info = JSON.parse(localStorage.getItem("adminAccountInfo"));
//用户名
const user = info.adminAccount;
// console.log(user);

const routers = useRouter();
//getRouters（）方法可以拿到所以路由
const getRouters = routers.getRoutes();
console.log(getRouters);
//前端过滤路由表中meta.isShow为true的路由
const list = routers.getRoutes().filter((v) => v.meta.isShow);
// console.table(list); //list可以做动态路由

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 1200px;
}

.aside {
  width: "300px";
  border-radius: 20px;
  margin: 10px;
  
  position: relative !important;
}

.infoBox {
  width: 100%;
  background: #233545;
  color: white;
  position: sticky;
  top: 0px
}


.infoBox div[data-v-bf5eacc9] {
  padding: 5px;

}

.home .el-icon {
  margin: 10px
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;

}

.infoBox div {
  padding: 10px;
}

::-webkit-scrollbar {
  /* 血槽宽度 */
  width: 0px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  /* 拖动条 */
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

::-webkit-scrollbar-track {
  /* 背景槽 */
  background-color: #ddd;
  border-radius: 6px;
}
</style>
